<input placeholder="Search The Matrix">
<style>
/* From Uiverse.io by absoluteSTrange - Tags: input, search */
input {
  display: inline-block;
  max-width: 196px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 10px 20px;
  border: 5px solid #1fbc00;
  -webkit-border-radius: 11px;
  border-radius: 11px;
  font: normal 19px/normal "Courier New", Courier, monospace;
  color: rgba(42,255,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: rgba(45,45,45,1);
  box-shadow: 0 0 9px 4px rgba(0,0,0,0.15) , -1px 4px 8px -1px rgba(0,0,0,0.49) inset;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.66);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transform: rotateX(-16.62deg) rotateY(-28.64788975654116deg);
  transform: rotateX(-16.62deg) rotateY(-28.64788975654116deg);
}

input:hover {
  -webkit-transform: rotateX(-15.62deg) rotateY(-23.65deg);
  transform: rotateX(-15.62deg) rotateY(-23.65deg);
}

.search__icon {
  height: 1.3em;
  width: 1.3em;
  fill: #b4b4b4;
}

input:focus {
  outline: none;
}
</style>
